import { usePathname } from "@lazarv/react-server";

import GitHub from "../../../../public/github.svg?react";
import AlgoliaSearch from "../../../components/AlgoliaSearch";
import DarkModeSwitch from "../../../components/DarkModeSwitch";
import LanguageSwitch from "../../../components/LanguageSwitch";
import { defaultLanguage } from "../../../const.mjs";
import { m } from "../../../i18n.mjs";

export default function Header({ lang }) {
  const baseUrl = lang === defaultLanguage ? "/" : `/${lang}/`;
  const pathname = usePathname();

  const activeClass = (path) =>
    pathname.includes(`/${lang}/${path}`)
      ? " text-indigo-500 dark:text-yellow-600"
      : "";

  return (
    <header>
      <nav>
        <a href={baseUrl} className="pl-7">
          <img
            src="/react-server.svg"
            className="size-6 absolute left-0 top-1/2 -translate-y-1/2 -mt-1"
            alt="@lazarv/react-server logo"
          />
          <h4>@lazarv</h4>
          <h3>react-server</h3>
        </a>
        <div className="container max-w-screen-lg flex gap-8 mx-auto">
          <a
            href={`${baseUrl}guide`}
            className={`ml-auto hidden lg:inline${activeClass("guide")}`}
          >
            {m.category_guide()}
          </a>
          <a
            href={`${baseUrl}integrations`}
            className={`hidden lg:inline${activeClass("integrations")}`}
          >
            {m.category_integrations()}
          </a>
          <a
            href={`${baseUrl}features`}
            className={`hidden lg:inline${activeClass("features")}`}
          >
            {m.category_features()}
          </a>
          <a
            href={`${baseUrl}router`}
            className={`hidden lg:inline${activeClass("router")}`}
          >
            {m.category_router()}
          </a>
          <a
            href={`${baseUrl}deploy`}
            className={`hidden lg:inline${activeClass("deploy")}`}
          >
            {m.category_deploy()}
          </a>
          <a
            href={`${baseUrl}tutorials`}
            className={`hidden lg:inline${activeClass("tutorials")}`}
          >
            {m.category_tutorials()}
          </a>
          <a
            href={`${baseUrl}api`}
            className={`mr-auto xl:mr-0 hidden lg:inline${activeClass("api")}`}
          >
            {m.category_api()}
          </a>
          <a
            href={`${baseUrl}team`}
            className={`mr-auto hidden xl:inline${activeClass("team")}`}
          >
            {m.category_team()}
          </a>
        </div>
        <div className="h-full ml-auto flex gap-2 items-center">
          <AlgoliaSearch
            placeholder={m.algolia_placeholder()}
            translations={{
              button: {
                buttonText: m.algolia_buttonText(),
                buttonAriaLabel: m.algolia_buttonText(),
              },
              modal: {
                searchBox: {
                  resetButtonTitle: m.algolia_resetButtonTitle(),
                  resetButtonAriaLabel: m.algolia_resetButtonTitle(),
                  cancelButtonText: m.algolia_cancelButtonText(),
                  cancelButtonAriaLabel: m.algolia_cancelButtonText(),
                  searchInputLabel: m.algolia_searchInputLabel(),
                },
                footer: {
                  selectText: m.algolia_selectText(),
                  selectKeyAriaLabel: m.algolia_selectKeyAriaLabel(),
                  navigateText: m.algolia_navigateText(),
                  navigateUpKeyAriaLabel: m.algolia_navigateUpKeyAriaLabel(),
                  navigateDownKeyAriaLabel:
                    m.algolia_navigateDownKeyAriaLabel(),
                  closeText: m.algolia_closeText(),
                  closeKeyAriaLabel: m.algolia_closeKeyAriaLabel(),
                  searchByText: m.algolia_searchByText(),
                },
                errorScreen: {
                  titleText: m.algolia_errorScreen_titleText(),
                  helpText: m.algolia_errorScreen_helpText(),
                },
                startScreen: {
                  recentSearchesTitle: m.algolia_recentSearchesTitle(),
                  noRecentSearchesText: m.algolia_noRecentSearchesText(),
                  saveRecentSearchButtonTitle:
                    m.algolia_saveRecentSearchButtonTitle(),
                  removeRecentSearchButtonTitle:
                    m.algolia_removeRecentSearchButtonTitle(),
                  favoriteSearchesTitle: m.algolia_favoriteSearchesTitle(),
                  removeFavoriteSearchButtonTitle:
                    m.algolia_removeFavoriteSearchButtonTitle(),
                },
                noResultsScreen: {
                  noResultsText: m.algolia_noResultsText(),
                  suggestedQueryText: m.algolia_suggestedQueryText(),
                  reportMissingResultsText:
                    m.algolia_reportMissingResultsText(),
                  reportMissingResultsLinkText:
                    m.algolia_reportMissingResultsLinkText(),
                },
              },
            }}
          />
          <LanguageSwitch lang={lang} />
          <DarkModeSwitch />
          <a
            href="https://github.com/lazarv/react-server"
            target="_blank"
            rel="noreferrer"
            aria-label="GitHub"
            className="size-8 inline-flex items-center justify-center"
          >
            <GitHub className="size-4 max-w-none" />
          </a>
        </div>
      </nav>
    </header>
  );
}